<template>
    <div class="layout main">
        <div class="layout left"></div>
        <div class="layout center content">
            <div class="layout top">
                <span class="mode-label">组件设计态</span>
                <test-project-design></test-project-design>
            </div>
            <div class="layout bottom">
                <span class="mode-label">组件运行态</span>
                <test-project></test-project>
            </div>
        </div>
        <div class="layout right">
            <!-- <test-project-props-panel :currentNode="currentNode"></test-project-props-panel> -->
        </div>
    </div>
</template>

<script>
import { path, mapValues, omitBy, flow } from "lodash/fp";

import testProject from "@/components/test-project";
import testProjectDesign from "@/components/test-project/design-time";
// import testProjectPropsPanel from "@/components/test-project/custom-panel";
import testProjectDefinition from "@/components/test-project/test-project.json";

const cssprefix = "test-project";

const getDefaultValuesFromDefinition = flow(
  path("definition.props.properties"),
  mapValues("default"),
  omitBy(val => val === undefined)
);

export default {
  components: {
    testProject,
    testProjectDesign,
    // testProjectPropsPanel
  },
  data() {
    return {
      currentNode: {
        props: getDefaultValuesFromDefinition(testProjectDefinition)
      }
    }
  },
  computed: {
    classes() {
      return cssprefix;
    }
  }
};
</script>
<!--
<style lang="less" scoped>
@import "~less-border-layout/lib/layouts.less";
@import "~less-border-layout/lib/border-layout.less";

.layout.main {
  min-width: 600px;
  min-height: 400px;

  .border-layout-left(15%);
  .border-layout-right(25%);

  .content {
    .border-layout-top(50%);
    .border-layout-bottom(50%);
  }
}

.layout.main {
  .left {
    border-right: 1px solid #4098f8;
  }
  .right {
    border-left: 1px solid #4098f8;
  }
  .content .top {
    border-bottom: 1px solid #4098f8;
  }
}
</style>
-->